<template>
  <div>
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :disabled="formReadOnly"
               label-width="120px">
        <table class="detail-table" cellspacing="0" cellpadding="0">
          <tr>
            <td class="table-title">出库单号</td>
            <td class="table-content">{{this.viewForm.codes}}</td>
          </tr>
          <tr>
            <td class="table-title">出库日期</td>
            <td class="table-content">{{this.viewForm.dates}}</td>
          </tr>
          <tr>
            <td class="table-title">出库类型</td>
            <td class="table-content">{{$dictUtils.getDictLabel("woutType", this.viewForm.wtype, "")}}</td>
          </tr>
          <tr>
            <td class="table-title">产品名称</td>
            <td class="table-content">{{this.viewForm.showPro}}</td>
          </tr>
          <tr>
            <td class="table-title">出库仓</td>
            <td class="table-content">{{this.viewForm.warehouseName}}</td>
          </tr>
          <tr>
            <td class="table-title">出库数量</td>
            <td class="table-content">{{this.viewForm.quatity}}</td>
          </tr>
          <tr>
            <td class="table-title">当前状态</td>
            <td class="table-content">
              <template>
                <div v-if="JSON.stringify(this.viewForm.flowState) === '{}'">
                  {{$dictUtils.getDictLabel("approvalState", this.viewForm.state, "")}}
                </div>
                <div v-else>
                  <div class="state process"
                       v-if="
                                      this.viewForm.flowState.code === 0 ||
                                      this.viewForm.flowState.code === 3 ||
                                      this.viewForm.flowState.code === 4 ||
                                      this.viewForm.flowState.code === 5
                                    "
                       type="danger"><span></span>{{ this.viewForm.flowState.status }}
                  </div>
                  <span v-if="this.viewForm.flowState.deleteReason"></span>
                  <div class="state process" v-if="this.viewForm.flowState.code === 2" type="primary">
                    <span></span>{{ this.viewForm.flowState.status }} ({{this.viewForm.flowState.currentTask.name}})
                  </div>
                  <div class="state process" v-if="this.viewForm.flowState.code === 100" type="success">
                    <span></span>{{this.viewForm.flowState.status}}
                  </div>
                </div>
              </template>
            </td>
          </tr>
        </table>
      </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        loading: false,
        queryId: '',
        inputForm: {
          codes:'',
          dates:'',
          wtype:'',
          showPro:'',
          warehouseName:'',
          quatity:'',
          approvalState:''
        },
        viewForm: {
          codes:'',
          dates:'',
          wtype:'',
          showPro:'',
          warehouseName:'',
          quatity:'',
          approvalState:'',
          flowState:{}
        }
      }
    },
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      }
    },
    components: {
    },
    watch: {
      // 例如：当前为调价审批表单，对应的是销售调价业务，表是：t_business_product
      // 这里的business就指的是t_business_product的一个主键ID
      'businessId': {
        handler (newVal) {
          if (this.businessId) {
            this.init(this.businessId)
          } else {
            this.$nextTick(() => {
              this.$refs.inputForm.resetFields()
            })
          }
        },
        immediate: true,
        deep: false
      }
    },
    methods: {
      // 根据主键ID从接口获取详情数据
      init (id) {
        if (id) {
          this.loading = true
          this.inputForm.id = id
          this.$nextTick(() => {
            // this.$refs.inputForm.resetFields()
            this.$http({
              url: `/test/warehouseChange?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.viewForm = data.result

              this.inputForm = this.recover(this.inputForm, data.result)
              this.loading = false
            })
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    margin-top: 5px;
    span:last-child{
      margin-left: 10px;
      font-size: 16px;
    }
  }
  ::v-deep.el-form{
    margin-top: 10px !important;
  }
  .detail-table{
    border: 1px solid #DDDDDD;
    border-bottom: none;
    td{
      padding: 12px 10px;
      border-right: 1px solid #DDDDDD;
      border-bottom: 1px solid #DDDDDD;
    }
    .table-title{
      width: 125px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .table-content{
      width: 260px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;

      span:first-child{
        margin-right: 20px;
      }
    }
  }
</style>
